<template>
  <div class="page light">
    <div class="page-main-no2">
      <div class="ksd-xqui-body">
        <div class="xquimini-content-page" style="height: calc(100% - 36px)">
          <div class="xquimini-container xquimini-page-anim">
            <div class="xquimini-main">
              <div class="pug-card">
                <div class="pug-card-body">
                  <div class="pug-form pug-form-inline">
                    <div class="standardFormRow___2SuxW standardFormRowLast___3ZKmo standardFormRowGrid___TWpoF">
                      <div class="content___v8hLk">
                        <div class="pug-row" style="margin-left: -8px; margin-right: -8px; row-gap: 0px;">
                          <div class="pug-col " style="padding-left: 8px; padding-right: 8px;">
                            <div class="xqui-inline"><label class="xqui-form-label">关键词</label>
                              <div class="xqui-input-inline">
                                <input autocomplete="off" v-model.trim="keyword"  class="xqui-input" type="text">
                              </div>
                            </div>
                            <div class="xqui-inline">
                              <button @click.prevent="searchData" class="xqui-btn xqui-btn-primary" type="submit">搜 索</button>
                              <button class="xqui-btn xqui-btn-primary" @click.prevent="searchRush" type="submit">回收站</button>
                              <button class="xqui-btn xqui-btn-primary mr10" @click.prevent="delBatch" type="submit">批量删除</button>
                              <router-link to="/permission/add">
                                <button class="xqui-btn xqui-btn-primary" type="submit"><i class="iconfont icon-tianjia1"></i> 添加权限管理</button>
                              </router-link>
                            </div>
                          </div>
                          <div class="pug-col pug-col-xs-24 pug-col-sm-24 pug-col-md-12 pug-col-lg-10 pug-col-xl-8" style="padding-left: 8px; padding-right: 8px; padding-top: 3px">
                            <div class="pug-row pug-form-item" style="row-gap: 0px;">
                              <div class="pug-col pug-form-item-label">
                                <label  title="活跃用户">权限状态</label></div>
                                <div class="pug-col pug-form-item-control pug-col-xs-24 pug-col-sm-24 pug-col-md-12">
                                <div class="pug-form-item-control-input">
                                  <div class="pug-form-item-control-input-content">
                                      <pug-select :items="statusItems" @change="searchByStatus"></pug-select>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="xqui-form xqui-border-box xqui-table-view">
                <div class="xqui-table-box">
                  <div class="xqui-table-header">
                    <table border="0" cellpadding="0" cellspacing="0"  class="xqui-table">
                      <thead>
                      <tr>
                        <th class=" xqui-table-col-special">
                          <div class="xqui-table-cell laytable-cell-checkbox" @click="selectAll">
                            <input type="checkbox">
                            <div class="xqui-unselect xqui-form-checkbox"><i class="xqui-icon" v-bind:class="[allchecked?'xqui-icon-ok':'']"></i></div>
                          </div>
                        </th>
                        <th class=" xqui-unselect">
                          <div class="xqui-table-cell"><span>主键</span></div>
                        </th>
                        <th class=" xqui-unselect">
                          <div class="xqui-table-cell"><span>权限标题</span></div>
                        </th>
                        <th class=" xqui-unselect">
                          <div class="xqui-table-cell"><span>权限名称</span></div>
                        </th>

                        <th class=" xqui-unselect">
                          <div class="xqui-table-cell"><span>权限代号</span></div>
                        </th>
                        <th class=" xqui-unselect">
                          <div class="xqui-table-cell"><span>权限URL</span></div>
                        </th>
                        <th class=" xqui-unselect">
                          <div class="xqui-table-cell"><span>排序</span></div>
                        </th>
                        <th class=" xqui-unselect">
                          <div class="xqui-table-cell"><span>删除状态</span></div>
                        </th>
                        <th class=" xqui-unselect">
                          <div class="xqui-table-cell"><span>权限状态</span></div>
                        </th>
                        <th class=" xqui-unselect">
                          <div class="xqui-table-cell"><span>父id</span></div>
                        </th>
                        <th class=" xqui-table-col-special">
                          <div class="xqui-table-cell"><span>操作</span></div>
                        </th>
                      </tr>
                      </thead>
                      <tbody>
                      <tr :key="item.id"  data-index="0" v-for="(item , index) in items">
                        <td class="xqui-table-col-special" data-field="0" data-key="1-0-0">
                          <div class="xqui-table-cell laytable-cell-checkbox" @click="changeChecked(index)">
                            <input   type="checkbox">
                            <div class="xqui-unselect xqui-form-checkbox"><i class="xqui-icon" :class="[item.checked?'xqui-icon-ok':'']"></i></div>
                          </div>
                        </td>
                            <td>
                              <div class="xqui-table-cell">{{item.id}}</div>
                            </td>
                            <td>
                               <div class="xqui-table-cell">{{item.title}}</div>
                            </td>
                        <td>
                               <div class="xqui-table-cell"><a href="#" :title="item.name" target="_blank">{{item.name}}</a></div>
                            </td>

                            <td>
                              <div class="xqui-table-cell">{{item.code}}</div>
                            </td>
                            <td>
                              <div class="xqui-table-cell">{{item.path}}</div>
                            </td>
                            <td>
                              <div class="xqui-table-cell">{{item.sorted}}</div>
                            </td>
                            <td @click="updateRelation(index,'isdelete')">
                              <div class="xqui-table-cell" :style="{'color':[item.isdelete ==1?'green':'red']}">
                                {{ item.isdelete == 1 ? "删除" : "未删除" }}
                              </div>
                            </td>
                            <td @click="updateRelation(index,'status')">
                              <div class="xqui-table-cell" :style="{'color':[item.status ==1?'green':'red']}">
                                {{ item.status == 1 ? "使用中" : "停止使用" }}
                              </div>
                            </td>
                            <td>
                              <div class="xqui-table-cell">{{item.pid}}</div>
                            </td>
                        <td class="xqui-table-col-special">
                          <div class="xqui-table-cell">
                            <router-link :to="'/permission/edit/'+item.id" v-if="item.isdelete==0"  class="xqui-btn xqui-btn-normal xqui-btn-xs data-count-edit">
                              <i class="iconfont icon-bianji"></i>编辑
                            </router-link>
                            <a @click.prevent="deleteItem(index)" v-if="item.isdelete==0" class="xqui-btn xqui-btn-xs xqui-btn-danger data-count-delete"><i class="iconfont icon-remove2"></i>删除</a>
                            <a @click.prevent="updateRelation(index,'isdelete')" v-if="item.isdelete==1" class="xqui-btn xqui-btn-xs xqui-btn-danger data-count-delete"><i class="iconfont icon-remove2"></i>恢复</a>
                          </div>
                        </td>
                      </tr>
                      </tbody>
                      <tfoot>
                      <tr>
                        <td colspan="20">
                          <div class="text-center ksd-empty" v-if="total == 0 && showtype == 3">
                            <i class="iconfont icon-zanwu2" style="font-size: 132px;color:#ddd;"></i>
                            <span>暂无数据</span></div>
                        </td>
                      </tr>
                      </tfoot>
                    </table>
                    <pug-loading :showtype="showtype"></pug-loading>
                  </div>
                </div>
                <div class="xqui-table-page">
                  <pug-page
                    :page-index="pageNo"
                    :total="total"
                    :page-size="pageSize"
                    @change="pageChange">
                  </pug-page>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

import permissionService from '@/services/permission'
import pugDialog from "@/plugins/PugDialog";
import pugMessage from "@/plugins/PugMessage";
import {isEmpty} from "@/utils/validate";

export default {
  name: "PermissionIndex.vue",
  components: {},
  data() {
    return {
      showtype: 1 //动画加载
      , pageNo: 1 //当前页码
      , pageSize: 10 //每页显示20条数据
      , total: 0 //总记录数
      , pages: 0//总页数
      , keyword: ""//搜索关键词
      , isDelete: 0//删除状态
      , status: ""//发布状态
      , sortFlag: false//排序字段
      , allchecked: false // 控制全选和反选
      , items: [] // 装载数据的容器
      , statusItems: [{text:"请选择",value:""},{text:"使用中",value:"1"},{text:"停止使用",value:"0"}] // 用控制选择分类的选中和激活
      , batchIds: [] // 装在批量删除的ids
    }
  },

  created() {
    // 页面加载执行初始化数据查询
    this.loadData();
  },

  methods: {
    // 1: 查询权限管理列表分页数据
    loadData() {
      const params = {
        pageNo: this.pageNo
        ,pageSize: this.pageSize
        ,isDelete: this.isDelete
        ,keyword: this.keyword
        ,status: this.status
      };

      this.showtype = 2;
      // 请求和查询权限管理服务器数据
      permissionService.findPermissionPage(params).then(res => {
        const {total, pages, records} = res.data;
        this.showtype = 3;
        // 分页要进行渲染
        this.total = total;
        // 总页数，后续可以判断边界
        this.pages = pages;
        // 控制元素是否选中和不选中
        records.forEach(item => item.checked = false);
        this.items = records;
      })
    },

    // 2 ：搜索权限管理
    searchData() {
      this.pageNo = 1;
      this.pageSize = 10;
      this.total = 0;
      this.pages = 0;
      this.isDelete = 0;
      this.items = [];
      //请注意千万不清空 keyword
      this.loadData();
    },


    //4: 根据状态搜索权限管理
    searchByStatus(item){
      this.status = item.value;
      this.pageNo = 1;
      this.pageSize = 10;
      this.total = 0;
      this.pages = 0;
      this.isDelete = 0;
      this.items = [];
      //请注意千万不清空 keyword
      this.loadData();
    },

    //5：查询回收站 权限管理
    searchRush() {
      this.pageNo = 1;
      this.pageSize = 10;
      this.total = 0;
      this.pages = 0;
      this.isDelete = 1;
      this.items = [];
      //请注意千万不清空 keyword
      this.loadData();
    },

    // 6 : 删除权限管理
    deleteItem(index) {
      const id = this.items[index].id;
      pugDialog.confirm("删除提示", "你确定删除吗?", {time: 10, sureText: "删除权限管理", closeText: "关闭"}).then(() => {
        permissionService.saveUpdatePermission({id: id, isdelete: 1}).then(res => {
          if (res.status == 200) {
            // 删除成功，直接把数据重新查询一次
            this.items.splice(index, 1);
            // 如果当前页删除完毕，查询查询一次。
            if (this.items.length == 0) {
              this.loadData();
            }
          }
        })
      });
    },

    // 7: 批量删除权限管理
    delBatch() {
      var batchIds = this.batchIds.join(",");
      if (isEmpty(batchIds)) {
        pugMessage.warn("请选择删除的数据!!!");
        return;
      }
      // 执行批量删除
      pugDialog.confirm("删除提示", "你确定删除吗?", {time: 10, sureText: "删除权限管理", closeText: "关闭"}).then(() => {
        permissionService.delBatchPermission(batchIds).then(res => {
          if (res.status == 200) {
            this.loadData();
          }
        })
      });
    },

    // 9: 修改状态控制
    updateRelation(index, field) {
      // 状态控制
      const changeVal = this["items"][index][field] == 1 ? 0 : 1;
      // 修改
      const id = this.items[index].id;
      var params = {id: id};
      params[field] = changeVal;
      permissionService["saveUpdatePermission"](params)["then"](res => {
        if (res.status == 200) {
          pugMessage["success"]("修改成功");
          this.items[index][field] = changeVal;
        }
      })
    },

    // 10 : 控制表格的选中
    changeChecked(index) {
      // 1: 开关
      this.items[index].checked = !this.items[index].checked;
      // 2 : 所有元素的个数
      var len = this.items.length;
      // 3： 选中元素的个数
      var clen = this.items.filter(item => item.checked).length;
      // 4: 拿选中元素的个数和所有元素的个数比较，如果相等说明全部选中了
      var flag = len == clen;
      // 5: 把顶部复选框选中
      this.allchecked = flag;
      // 赋值相关
      var selectId = this.items[index].id;
      // 查询元素是否存在数组中，如果存在返回元素所在数组的位置，如果找不到返回 -1
      var selectIndex = this.batchIds.findIndex((item) => item == selectId);
      // 如果返回是-1 ,说明不存在数组中，
      if (selectIndex == -1) {
        // 那么就添加数组
        this.batchIds.push(selectId);
      } else {
        // 如果存在，说明用户取消选中，就要元素从数组中剔除（删除）
        this.batchIds.splice(selectIndex, 1);
      }
    },

    // 选中所有的数据
    selectAll() {
      // 1: 自身开关
      this.allchecked = !this.allchecked;
      // 2: 开关影响元素 自身求反，真变成假， 假变成真
      //this.items.map(item => item.checked = !item.checked);
      this.items.map(item => item.checked =  this.allchecked); // 2: 开关影响元素 自身求反，要么全真， 要么全假
      // 3: 取值相关
      var selectItems = this.items.filter(item => item.checked);
      // 4：每次操作清楚一次，把上次的累加进去。就不正确
      this.batchIds = [];
      selectItems.forEach(item => {
        this.batchIds.push(item.id);
      });
    },

    // 分页执行相关
    pageChange(page) {
      this.pageNo = page
      this.loadData();
    },

  }
}
</script>
<style scoped>
</style>
